<template>
    <div class="p-add-class">
        <page-title>添加帖子</page-title>
        <div class="main"> 
            <div class="main-box">
                <div class="group">
                    <span class="name text-right">帖子标题：</span>
                    <el-input v-model="form.title" placeholder="请输入标题名称"></el-input>
                </div>
                <div class="group clear-both">
                    <span class="name text-right float-left">帖子内容：</span>
                    <el-input type="textarea" class="float-left" v-model="form.content" placeholder="请输入内容名称"></el-input>
                </div>
                <div class="group">
                    <span class="name text-right">选择话题：</span>
                    <el-select v-model="form.classVal" placeholder="请选择分类">
                        <el-option
                        v-for="item in optionClass"
                        :key="item.id"
                        :label="item.title"
                        :value="item.id">
                        </el-option>
                    </el-select>
                </div>
                <div class="group clear-both">
                    <span class="name text-right  float-left">帖子图片：</span>
                    <div class="banner-setting float-left">
                        <div class="index-banner upload-item">
                            <div class="banner-img-box">
                                <div class="banner-img" 
                                v-for="(item, index) in bannerImgArr"
                                @click="triigerFile(index)"
                                :style="'background-image:url('+img_host+item+')'">
                                <b class="cursor" @click.stop="clearImg(index)">×</b>
                                </div>
                            </div>
                            <el-button 
                            type="primary"
                            id="doctorAuditing">上传banner图
                                <input type="file" 
                                    name="file"
                                    id="filebtn"
                                    multiple
                                    ref="triigerbtn"
                                    @change='addImgEvent'
                                    accept="image/png, image/jpeg, image/jpg">
                            </el-button> 
                        </div> 
                    </div>
                </div>
                <div class="group">
                    <span class="name text-right">权限设置：</span>  
                    <el-switch v-model="form.level_three" active-text="高级会员可看"></el-switch> 
                    <el-switch v-model="form.level_two" active-text="初级会员可看"></el-switch> 
                    <el-switch v-model="form.level_one" active-text="游客登录可看 "></el-switch> 
                </div>
                <div class="group text-center btn">
                     <el-button type="primary" @click="postData">确定</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import * as api from './../../../api/api'
import {IMG_ROOT} from './../../../config'
import { Message } from 'element-ui'
export default {
    data() {
        return{ 
            img_host: IMG_ROOT,
            form:{
                title:'',
                content:'',
                classVal:'',
                images:'',
                level_three:true, //高级会员可看
                level_two:true, //初级会员可看
                level_one:true, //游客登录可看
            },
            optionClass:[],
            bannerImgArr: [],
            modifyImgIndex: '',  //要修改的图序号
        }
    },  
    created() { 
        this.getClassList();
    },
    methods: {
        postData(){
            let vm = this;
            if(vm.form.title==''){
                vm.$message({ message:"标题不能为空" }); 
            }else if(vm.form.content==''){
                vm.$message({ message:"内容不能为空" }); 
            }else if(vm.form.classVal==''){
                vm.$message({ message:"请选择话题" }); 
            }else{ 
                if(vm.$route.query.forumId){
                    vm.updatedData(vm.$route.query.forumId)
                }else{
                    vm.ceratedData();
                }
            } 
        },
        updatedData(val) {
            let vm = this;
            let body={
                model:'Forums', 
                update_condition:{ 
                    forum_id:val, 
                }, 
                data:{
                    title:vm.form.title,            
                    content:vm.form.content,  
                    topic_id:vm.form.classVal,   
                    level_three:vm.form.level_three?1:0,
                    level_two:vm.form.level_two?1:0,
                    level_one:vm.form.level_one?1:0,  
                },  
            };
            if(vm.bannerImgArr.length!=0){
                vm.bannerImgArr.forEach((item,index)=>{
                    if(item&&item!='undefined'){
                        vm.form.images+=','+item;  
                    } 
                }) 
                body.data.images=vm.form.images;
            }else{
                body.data.images='';
            } 
            api.createData(body).then(res=>{
                if(res.data.code==200){
                    vm.$message({
                        message:"添加数据成功！",
                        type:'success'
                    }); 
                    vm.$router.push({name:'facebookList'});
                }
            });
        },
        ceratedData(){
            let vm = this;
            let body={
                model: "Forums",
                data: {
                    title:vm.form.title,            
                    content:vm.form.content,              
                    uid: sessionStorage.getItem('u_id'),
                    uid_type:2,
                    topic_id:vm.form.classVal,
                    level_three:vm.form.level_three?1:0,
                    level_two:vm.form.level_two?1:0,
                    level_one:vm.form.level_one?1:0,    
                }
            };  
            if(vm.bannerImgArr.length!=0){
                vm.bannerImgArr.forEach((item,index)=>{
                    if(item&&item!='undefined'){
                    vm.form.images+=','+item;  
                    } 
                }) 
                body.data.images=vm.form.images;
            }else{
                body.data.images='';
            } 
            api.createData(body).then(res=>{
                if(res.data.code==200){
                    vm.$message({
                        message:"添加数据成功！",
                        type:'success'
                    }); 
                    vm.$router.push({name:'facebookList'});
                }
            });
        },
        getClassList(){
            let vm = this;
            let body={
                model:'Topics', 
                offset:vm.offset,
                limit:vm.limit,
                with:{
                    "0":"follows",
                    "1":"count"
                },  
            };
            api.getDateList(body).then(res=>{
                if(res.data.code==200){
                    vm.optionClass=res.data.data.data;
                }
            });
        },
            //选择图片
        addImgEvent(event){
            var that = this;
            var picNum = that.bannerImgArr.length;
            var uploadNum = event.target.files.length;
            if (picNum + uploadNum > 6){
                Message({
                    showClose: true,
                    type: 'error',
                    message: '图片上传张数不能超过6张'
                }); 
                document.getElementById('filebtn').value = '';
                return false;
            };
            var imgs = event.target.files;
            var successNum = 0;
            for (var i=0; i<imgs.length; i++) {
                var size = imgs[i].size/1024;
                // if(size>500){
                //     Message({
                //     showClose: true,
                //     type: 'error',
                //     message: '图片大小不能大于500KB'
                //     }); 
                //     continue; 
                // };
                var formdata = new FormData();
                formdata.append('file', imgs[i]);
                api.uploadFile(formdata).then(res => {
                    if (res.data.code == 200) {
                        
                        if (that.modifyImgIndex != '') {
                        that.bannerImgArr.splice(that.modifyImgIndex, 1, res.data.data);
                        } else {
                        that.bannerImgArr.push(res.data.data);
                        }
                        successNum++;
                        if (successNum == uploadNum) {
                        Message({
                            message: '图片上传完成',
                            type: 'success'
                        });
                        that.modifyImgIndex = '';
                        }
                    }
                }); 
            }
        },
        clearImg(index){
            this.bannerImgArr.splice(index,1);
        },
        //点击图片修改该图片
        triigerFile(index){
            var that = this;
            that.modifyImgIndex = index;
            that.$refs.triigerbtn.click();
        },
        //获得帖子详情
        getstateDetail(id){
            let vm = this;
            let body={
                model: "Forums",
                with:{
                    "0":"topics",
                    "1":"collects",
                    "2":"shares",
                    "3":"comments"
                },
                condition:{
                    forum_id:id
                }
            };
            api.getDataDetail(body).then(res=>{
                if(res.data.code==200){ 
                    let arrdata=res.data.data;
                    vm.form={
                        title:arrdata.title,
                        content:arrdata.content,
                        classVal:arrdata.topics.id, 
                        level_three:arrdata.topics.level_three==1 ?true:false, //高级会员可看
                        level_two:arrdata.topics.level_two==1 ?true:false, //初级会员可看
                        level_one:arrdata.topics.level_one==1 ?true:false, //游客登录可看
                    }
                    let arrImg=arrdata.images.split(',');
                    let dataImg=[];
                    arrImg.forEach((item,index)=>{
                        if(item&&item!='undefined'){
                            dataImg.push(item);
                        }
                    }); 
                    vm.bannerImgArr=dataImg;
                }
            })
        },
    }, 
    beforeRouteEnter:function(to,from,next) {    //路由生命周期
        next(vm => { 
            if(vm.$route.query.forumId){
                vm.getstateDetail(vm.$route.query.forumId);
            } 
        })
    },
}
</script>

<style lang="scss" scoped>
.p-add-class {
    height:100%;  
    .main{
        padding: 10px 50px; 
        background:#fff;
        .main-box{
            width:80%;
            margin:auto; 
            .group{
                width:100%;
                margin:30px 0;
                .name{
                    display:inline-block;
                    width:110px;
                }
                .el-input,.el-textarea{
                    width:300px; 
                }
            }
            .btn{
                padding-top:20px;
            }
        }
    }

    .banner-setting {
        position: relative;
        /*width: 100%;*/
        /*background: #ffffff;*/
        /*border: 1px solid #e4e7ed;*/
        border-top: none;
        padding: 20px;
        .upload-item {
            /*padding-top:45px;*/
            /*padding-bottom:100px;*/
            .upload-text {
                font-size: 12px;
                color: #999999;
                margin-left: 30px;
            }
        }
        .btn-box {
            text-align: center;
        }
    }  
    #doctorAuditing {
        position: relative;
        input {
            opacity: 0;
            width:100%;
            height: 100%;
            position: absolute;
            top:0;
            left:0;
        }
    }
    .banner-img-box {
        display: flex;
        margin-bottom: 30px;
        .banner-img {
            position:relative;
            width: 130px;
            height: 130px;
            border: 1px dashed #cccccc;
            margin-right: 20px;
            background-size: contain;
            background-position: center center;
            background-repeat: no-repeat;
            b{
                position:absolute;
                top:-15px;
                left:-15px;
                font-size:20px;
                width:30px;
                height:30px;
                line-height:30px;
                text-align:center;
            }
        }
    }
}
</style>
